{extend name='main'}
{block name='content'}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }
    .store-total-container .store-total-icon {
        top: 45%;
        right: 8%;
        font-size: 65px;
        position: absolute;
        color: rgba(255, 255, 255, 0.4);
    }
    .store-total-container .store-total-item {
        color: #fff;
        line-height: 4em;
        padding: 15px 25px;
        position: relative;
    }
    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 46px;
        line-height: 46px;
    }
    @media screen and (max-device-width: 768px) {
        .online{
            width:50%;
        }
    }
    @media screen and (min-device-width: 992px) {
        .online{
            width:73%;
        }
        .game_distribution{
            width:50%;
        }
    }
</style>
<div class="think-box-shadow store-total-container notselect" >
    <div class="margin-bottom-15">数据概览</div>
    <div class="layui-row layui-col-space15" >
        <div class="layui-col-sm6 layui-col-md3">
            <div class="store-total-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)" >
                <div>新增人数</div>
                <div>{$reg_user_today_count}</div>
                <div>今日新增人数</div>
            </div>
            <i class="store-total-icon layui-icon layui-icon-template-1"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3" >
            <div class="store-total-item nowrap" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)" >
                <div>活跃人数</div>
                <div>{$Diurnal_activity_user_today}</div>
                <div>今日活跃人数</div>
            </div>
            <i class="store-total-icon layui-icon layui-icon-user"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3" >
            <div class="store-total-item nowrap" style="background:linear-gradient(-113deg,#c543d8,#925cc3)" >
                <div>充值人数</div>
                <div>{$recharge_user_today}</div>
                <div>今日充值人数</div>
            </div>
            <i class="store-total-icon layui-icon layui-icon-read"></i>
        </div>
        <div class="layui-col-sm6 layui-col-md3" >
            <div class="store-total-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)" >
                <div>充值金额</div>
                <div>{$today_recharge_amout}</div>
                <div>今日充值金额</div>
            </div>
            <i class="store-total-icon layui-icon layui-icon-survey" ></i>
        </div>
    </div>
    <div class="layui-row layui-col-space15" >
        <div class="layui-col-sm6 layui-col-md3" >
            <div class="margin-bottom-15">实时在线人数 <b style="font-size: 12px;color: #ccc;" >10分钟(相对)</b></div>
            <div id="main" style="height:350px;" >
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3 online"  >
            <div class="margin-bottom-15">用户实时在线走势</div>
            <div id="games_online" style="height:350px;width:100%;" >
            </div>
        </div>
    </div>
</div>

<!--<div class="think-box-shadow store-total-container notselect" >-->
    <!--<div class="layui-row layui-col-space15">-->
        <!--<div class="layui-col-sm6 layui-col-md3 game_distribution" >-->
            <!--<div class="margin-bottom-15">计费点分布 <b style="font-size: 12px;color: #ccc;" >今日</b></div>-->
            <!--<div id="game_Billing_point" style="height:800px;" >-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-col-sm6 layui-col-md3 game_distribution"  >-->
            <!--<div class="margin-bottom-15">渠道充值情况 <b style="font-size: 12px;color: #ccc;" >今日</b></div>-->
            <!--<div id="games_recharge" style="height:800px;" >-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('main'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    min: 0,
                    max: 500,
                    detail: {formatter:'{value}人'},
                    data: [{value: eval('{:json_encode($total_game_user_online_number)}'), name: ''}]
                }
            ]
        };
        chart.setOption(option);
    });
</script>
<script>
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('games_online'));
        window.onresize = chart.resize;
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['在线用户']
            },
            toolbox: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data :eval('{:json_encode($user_online_trend.time)}')
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                        color: '#2f9de2',
                        formatter: "{value}人"
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#cccccc'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'用户人数',
                    type:'line',
                    stack: '总量',
                    /*label: {normal: {show: true, position: ['30%', '-100%'], offset: [10, -1], formatter: "{c}"}},*/
                    data: eval('{:json_encode($user_online_trend.count)}'),
                    lineStyle: {
                        normal: {
                            color: '#2f9de2',
                            width: 2,
                           /* type: 'dashed'*/
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#ff7d7d',
                            color: '#c543d8'
                        }
                    }
                },
            ]
        };
        chart.setOption(option);
    });
</script>
<!--<script>-->
    <!--require(['echarts'], function (echarts, chart) {-->
        <!--chart = echarts.init(document.getElementById('game_Billing_point'));-->
        <!--window.onresize = chart.resize;-->
        <!--var seriesLabel = {-->
            <!--normal: {-->
                <!--show: true,-->
                <!--textBorderColor: '#c543d8',-->
                <!--textBorderWidth: 2-->
            <!--}-->
        <!--}-->
        <!--option = {-->
            <!--title: {-->
                <!--text: '实时计费点分布'-->
            <!--},-->
            <!--tooltip: {-->
                <!--trigger: 'axis',-->
                <!--axisPointer: {-->
                    <!--type: 'shadow'-->
                <!--}-->
            <!--},-->
            <!--legend: {-->
                <!--data: eval('{:json_encode($user_billing_count.billing)}')-->
            <!--},-->
            <!--grid: {-->
                <!--left: 200-->
            <!--},-->
            <!--toolbox: {-->
                <!--show: true,-->
                <!--feature: {-->
                    <!--saveAsImage: {}-->
                <!--}-->
            <!--},-->
            <!--xAxis: {-->
                <!--type: 'value',-->
                <!--name: '数量',-->
                <!--axisLabel: {-->
                    <!--formatter: '{value}'-->
                <!--},-->
                <!--splitLine: {-->
                    <!--lineStyle: {-->
                        <!--type: 'dashed',-->
                        <!--color: '#cccccc'-->
                    <!--}-->
                <!--}-->
            <!--},-->
            <!--yAxis: {-->
                <!--type: 'category',-->
                <!--inverse: true,-->
                <!--data:eval('{:json_encode($user_billing_count.billing)}'),-->
                <!--axisLabel: {-->
                    <!--margin: 20,-->
                    <!--rich: {-->
                        <!--value: {-->
                            <!--lineHeight: 10,-->
                            <!--align: 'center'-->
                        <!--},-->
                    <!--}-->
                <!--}-->
            <!--},-->
            <!--series: [-->
                <!--{-->
                    <!--name: '购买数量',-->
                    <!--type: 'bar',-->
                    <!--label: seriesLabel,-->
                    <!--data: eval('{:json_encode($user_billing_count.count)}'),-->
                    <!--itemStyle: {-->
                        <!--normal: {-->
                            <!--borderWidth: 3,-->
                            <!--color: '#c543d8'-->
                        <!--}-->
                    <!--}-->
                <!--}-->
            <!--]-->
        <!--};-->
        <!--chart.setOption(option);-->
    <!--});-->
<!--</script>-->
<!--<script>-->
    <!--require(['echarts'], function (echarts, chart) {-->
        <!--chart = echarts.init(document.getElementById('games_recharge'));-->
        <!--window.onresize = chart.resize;-->
        <!--var seriesLabel = {-->
            <!--normal: {-->
                <!--show: true,-->
                <!--textBorderColor: '#c543d8',-->
                <!--textBorderWidth: 2-->
            <!--}-->
        <!--}-->
        <!--option = {-->
            <!--title: {-->
                <!--text: '渠道充值情况'-->
            <!--},-->
            <!--tooltip: {-->
                <!--trigger: 'axis',-->
                <!--axisPointer: {-->
                    <!--type: 'shadow'-->
                <!--}-->
            <!--},-->
            <!--legend: {-->
                <!--data: eval('{:json_encode($user_recharge_info.spreaderId)}')-->
            <!--},-->
            <!--grid: {-->
                <!--left: 180-->
            <!--},-->
            <!--toolbox: {-->
                <!--show: true,-->
                <!--feature: {-->
                    <!--saveAsImage: {}-->
                <!--}-->
            <!--},-->
            <!--xAxis: {-->
                <!--type: 'value',-->
                <!--name: '充值金额',-->
                <!--axisLabel: {-->
                    <!--formatter: '{value}'-->
                <!--},-->
                <!--splitLine: {-->
                    <!--lineStyle: {-->
                        <!--type: 'dashed',-->
                        <!--color: '#cccccc'-->
                    <!--}-->
                <!--}-->
            <!--},-->
            <!--yAxis: {-->
                <!--type: 'category',-->
                <!--inverse: true,-->
                <!--data:eval('{:json_encode($user_recharge_info.spreaderId)}'),-->
                <!--axisLabel: {-->
                    <!--margin: 20,-->
                    <!--rich: {-->
                        <!--value: {-->
                            <!--lineHeight: 10,-->
                            <!--align: 'center'-->
                        <!--},-->
                    <!--}-->
                <!--}-->
            <!--},-->
            <!--series: [-->
                <!--{-->
                    <!--name: '充值金额',-->
                    <!--type: 'bar',-->
                    <!--label: seriesLabel,-->
                    <!--data: eval('{:json_encode($user_recharge_info.recharge)}'),-->
                    <!--itemStyle: {-->
                        <!--normal: {-->
                            <!--borderWidth: 3,-->
                            <!--color: '#1E41FF'-->
                        <!--}-->
                    <!--}-->
                <!--}-->
            <!--]-->
        <!--};-->
        <!--chart.setOption(option);-->
    <!--});-->
<!--</script>-->
{/block}